/**
 * Global authority directive
 * Used for fine-grained control of component permissions
 * @Example v-access:role="[ROLE_NAME]" or v-access:role="ROLE_NAME"
 * @Example v-access:code="[ROLE_CODE]" or v-access:code="ROLE_CODE"
 */
import type {App, Directive, DirectiveBinding} from 'vue';

import {useAccess} from './use-access';

function isAccessible(
    el: Element,
    binding: DirectiveBinding<string | string[]>,
) {
    const {accessMode, hasAccessByCodes, hasAccessByRoles} = useAccess();

    const value = binding.value;

    if (!value) return;
    const authMethod =
        accessMode.value === 'frontend' && binding.arg === 'role'
            ? hasAccessByRoles
            : hasAccessByCodes;

    const values = Array.isArray(value) ? value : [value];

    if (!authMethod(values)) {
        el?.remove();
    }
}

const mounted = (el: Element, binding: DirectiveBinding<string | string[]>) => {
    isAccessible(el, binding);
};

const authDirective: Directive = {
    mounted,
};

export function registerAccessDirective(app: App) {
    app.directive('access', authDirective);
}
